<template>
	<view class="business_card_wrap">
		<!-- 名片展示页
		<button open-type="share">分享按钮</button> -->
		<!-- 个人信息 -->
		<view class="base_info_card">
			<!-- 插画 -->
			<image class="card_ch_img" src="./images/card_ch.svg" mode=""></image>

			<!-- 上部分-头像、名称、职位 -->
			<view class="top_content_box">
				<view class="avatar_box" style="width: 60px; height: 60px">
					<wd-img :width="60" :height="60" mode="widthFix" round :src="cardBaseInfo.avatarUrl">
						<template #loading>
							<view class="loading-wrap">
								<wd-loading />
							</view>
						</template>
					</wd-img>
				</view>
				<view class="right_box">
					<view class="name_box">
						<text class="name_text">{{ textDispose(cardBaseInfo.userName) }}</text>
					</view>
					<view class="position_box">
						<text class="position_text">{{ textDispose(cardBaseInfo.userPosition) }}</text>
					</view>
				</view>
			</view>

			<!-- 公司名称 -->
			<view class="company_name_box">
				<text class="company_name_text">{{ textDispose(cardBaseInfo.companyName) }}</text>
			</view>

			<!-- 下部分-手机号、邮箱、官网、公司地址 -->
			<view class="bottom_content_box">
				<!-- 手机号 -->
				<view class="content_item_box">
					<view class="left_box">
						<image class="icon_img" src="./images/phone.svg" mode=""></image>
						<text class="value">{{ textDispose(cardBaseInfo.phone) }}</text>
					</view>
					<view class="right_box" @click="callClick">
						<text class="action_text">点击拨打</text>
						<image class="arrows_icon" src="./images/arrows_right.svg" mode=""></image>
					</view>
				</view>
				<!-- 邮箱 -->
				<view class="content_item_box">
					<view class="left_box">
						<image class="icon_img" src="./images/email.svg" mode=""></image>
						<text class="value">{{ textDispose(cardBaseInfo.email) }}</text>
					</view>
				</view>
				<!-- 官网 -->
				<view class="content_item_box">
					<view class="left_box">
						<image class="icon_img" src="./images/web.svg" mode=""></image>
						<text class="value">{{ textDispose(cardBaseInfo.website) }}</text>
					</view>
				</view>
				<!-- 公司地址 -->
				<view class="content_item_box">
					<view class="left_box">
						<image class="icon_img" src="./images/position.svg" mode=""></image>
						<text class="value">{{ textDispose(cardBaseInfo.companyAddress) }}</text>
					</view>
					<view class="right_box" @click="navigationClick">
						<text class="action_text">点击导航</text>
						<image class="arrows_icon" src="./images/arrows_right.svg" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 个人介绍 -->
		<view class="person_introduce_box">
			<wd-card>
				<template #title>
					<view>
						<image src="./images/personjs.svg" style="width: 20px; height: 20px; position: relative; top: 4px" mode=""></image>
						<!-- ${cardBaseInfo.userName}的 -->
						{{ `个人介绍` }}
					</view>
				</template>
				<view class="person_introduces_box">
					{{ cardBaseInfo.userIntroduce == null || cardBaseInfo.userIntroduce == undefined || cardBaseInfo.userIntroduce == '' ? '暂无介绍' : cardBaseInfo.userIntroduce }}
				</view>
			</wd-card>
		</view>

		<!-- 产品介绍 -->
		<view class="product_introduce_box">
			<wd-card>
				<template #title>
					<view class="cpzx_title_box">
						<view class="left_box">
							<image src="./images/productIntroduce.svg" style="width: 20px; height: 20px; position: relative; top: 4px" mode=""></image>
							<!-- ${cardBaseInfo.userName}的 -->
							{{ `产品中心` }}
						</view>
						<view class="right_box">
							<text class="tips_text">点击复制链接,在浏览器查看</text>
						</view>
					</view>
				</template>
				<view class="product_introduce_content_box" v-if="productIntroduceList.length!=0">
					<view class="product_introduce_item_box" v-for="(pil, indexPil) in productIntroduceList" :key="indexPil">
						<view class="left_box">
							<image class="icon_img" src="./images/website.svg" mode=""></image>
							<text class="title">{{ pil.introduceTitle }}</text>
						</view>
						<text class="copy_text" @click="toH5Page(pil.introduceUrl)">复制链接</text>
					</view>
				</view>
				<view v-else class="not_data_box">
					<text class="not_data_text">
						暂无产品
					</text>
				</view>
			</wd-card>
		</view>

		<!-- 企业介绍 -->
		<view class="company_introduce_box">
			<wd-card>
				<template #title>
					<view>
						<image src="./images/companyjs.svg" style="width: 20px; height: 20px; position: relative; top: 4px" mode=""></image>
						企业介绍
					</view>
				</template>
				<view class="company_introduces_box" v-if="companyIntroduceList.length != 0">
					<!-- {{ cardBaseInfo.userIntroduce }} -->
					<view class="company_introduces_item_box" v-for="(itemC, indexCi) in companyIntroduceList" :key="indexCi">
						<view class="title_box">
							{{ textDispose(itemC.title) }}
						</view>
						<view class="content_box">
							<view class="content_text_box">
								{{ textDispose(itemC.content) }}
							</view>
							<view class="content_img_box" style="">
								<!-- width="82vw" :height="200" -->
								<!-- <image class="content_img" v-for="(itemCImg,indexCImg) in itemC.images" :key="indexCImg" :src="itemCImg" mode=""></image> -->
								<wd-img v-for="(itemCImg, indexCImg) in itemC.images" :key="indexCImg" :src="itemCImg" :enable-preview="true" mode="widthFix">
									<template #loading>
										<view class="loading-wrap">
											<wd-loading />
										</view>
									</template>
								</wd-img>
							</view>
						</view>
					</view>
				</view>
				<!-- 暂无数据 -->
				<view class="not_data" v-else>
					<text>暂无介绍</text>
				</view>
			</wd-card>
		</view>

		<!-- 下方占位元素 -->
		<view class="bottom_placeholder_box"></view>

		<!-- 悬浮按钮 -->
		<wd-fab custom-class="custom_fab" :type="type" :position="position" :draggable="true" :direction="direction" inactiveIcon="layers">
			<wd-button @click="showToast('qrcode')" custom-class="custom-button" type="success" round>
				<wd-icon name="qrcode" size="32px"></wd-icon>
			</wd-button>
			<wd-button @click="showToast('collect')" custom-class="custom-button" type="warning" round>
				<wd-icon name="star" size="32px"></wd-icon>
			</wd-button>
			<wd-button open-type="share" custom-class="custom-button" type="primary" round>
				<wd-icon name="share" size="32px"></wd-icon>
			</wd-button>
		</wd-fab>

		<!-- 微信二维码 -->
		<wd-message-box selector="wd-message-box-slot">
		<view class="message_p1">
			<view class="wx_qr_code_box">
				<image style="width: 220px; height: 220px" :show-menu-by-longpress="true" :src="cardBaseInfo.wxQrCode" mode=""></image>
			</view>
			<view class="wx_number_box">
				<text class="label">微信号:</text>
				<text class="value">{{ cardBaseInfo.wxNumber }}</text>
				<!-- <text class="copy"> -->
				<image style="width: 20px; height: 20px; position: relative; top: 4px; left: 6px" src="./images/copy.svg" mode="" @click="copyClick"></image>
				<!-- </text> -->
			</view>
			<!-- <wd-rate custom-class="custom-rate-class" v-model="rate"/> -->
		</view>
		</wd-message-box>
		
		
		<!-- 复制产品链接提示 -->
		<wd-message-box class="message1"  selector="wd-message-box-slot1">
			<view class="message_p2">
				<image class="copy_success_img" src="./images/copySuccess.png" mode=""></image>
				<text class="copy_text">复制成功,请粘贴到浏览器打开!</text>
			</view>
		</wd-message-box>
	</view>
</template>

<script>
import { defineComponent, ref } from 'vue'
import './index.scss'
export default defineComponent({
	name: 'BusinessCard'
})
</script>
<script setup>
import { onShareAppMessage, onLoad } from '@dcloudio/uni-app'
import { useToast } from '@/uni_modules/wot-design-uni'
import { useMessage } from '@/uni_modules/wot-design-uni'
import { collectCardApi, selectCardDetailApi } from '@/api/card.js'
import { selectLocationByAddressApi } from '@/api/gaode.js'
import { useUserStore } from '@/stores/user.js'
// const rate = ref(1)
const message = useMessage('wd-message-box-slot')
const message1 = useMessage('wd-message-box-slot1')

const userStore = useUserStore()

const toast = useToast()
const type = ref('primary')
const position = ref('right-bottom')
const direction = ref('top')
const disabled = ref(false)
const gap = ref({})

const copyClick = () => {
	uni.setClipboardData({
		data: cardBaseInfo.value.wxNumber,
		success: () => {
			uni.showToast({
				title: '复制成功',
				icon: 'none',
				mask: true,
				duration: 1000
			})
		}
	})
}

// 文本处理
const textDispose = (str) => {
	let nStr = ''
	if (str == null || str == '' || str == undefined) {
		nStr = '未知'
	} else {
		nStr = str
	}
	return nStr
}

const showToast = (msg) => {
	console.log('msg', msg)
	// toast.show({
	// 	position:"top",
	// 	msg:msg
	// })
	switch (msg) {
		case 'share':
			break

		case 'collect':
			// 先判断是否登录
			if (userStore.isLogin) {
				if (userStore.userInfo.userId != cardBaseInfo.value.userId) {
					collectCardFunc()
				} else {
					uni.showToast({
						title: '不能将自己的名片放入名片夹',
						icon: 'none',
						mask: true,
						duration: 1000
					})
				}
			} else {
				uni.showToast({
					title: '请先进行登录',
					icon: 'none',
					mask: true,
					duration: 1000
				})
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
			break
		case 'qrcode':
			message
				.confirm({
					title: '',
					confirmButtonText: '保存到相册'
				})
				.then(() => {
					uni.showLoading({
						title: '下载中...'
					})
					uni.downloadFile({
						url: cardBaseInfo.value.wxQrCode,
						success(res) {
							if (res) {
								console.log('下载成功', res)
								uni.hideLoading()
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success(res) {
										uni.showToast({
											title: '保存成功',
											icon: 'none',
											mask: true,
											duration: 1000
										})
										console.log(res)
									},
									fail(res) {
										uni.showToast({
											title: '保存失败',
											icon: 'none',
											mask: true,
											duration: 1000
										})
										console.log(res)
									}
								})
							}
						},
						fail: (err) => {
							if (err) {
								console.log('下载失败', err)
								uni.hideLoading()
							}
						}
					})
				})
				.catch((error) => {
					console.log(error)
				})
			break
		default:
			break
	}
	// uni.showToast({
	// 	title: msg,
	// 	mask: true,
	// 	icon: 'none',
	// 	duration: 1000
	// })
}

const optParam = ref(null)

// 卡片基本信息
const cardBaseInfo = ref({
	// 卡片用户id
	userId: 1,
	// 头像链接
	avatarUrl: '',
	// 姓名
	userName: '',
	// 职位
	userPosition: '',
	// 公司名称
	companyName: '',
	// 手机号
	phone: '',
	// 邮箱
	email: '',
	// 官网
	website: '',
	// 公司地址
	companyAddress: '',
	// 公司地址lat
	lat: '',
	// 公司地址lng
	lng: '',
	// 个人介绍
	userIntroduce: '',
	// 微信号
	wxNumber: '',
	// 微信二维码
	wxQrCode: ''
})

// 产品介绍列表
const productIntroduceList = ref([])

// 企业介绍列表
const companyIntroduceList = ref([])

// 去H5页面
const toH5Page = (url) => {
	// uni.navigateTo({
	// 	url:"/pages/webViewPage/webViewPage"+`?url=${url}`
	// })
	uni.setClipboardData({
		data: url,
		success: () => {
			// uni.showToast({
			// 	title: '复制成功',
			// 	mask: true,
			// 	icon: 'none',
			// 	duration: 1000
			// })
			message1.alert('')
		},
		fail: () => {
			uni.showToast({
				title: '复制失败',
				mask: true,
				icon: 'none',
				duration: 1000
			})
		}
	})
}

onShareAppMessage(() => {
	return {
		title: `${cardBaseInfo.value.userName}的名片`,
		path: '/pages/businessCard/businessCard' + `?beDisplayedUserId=${cardBaseInfo.value.userId}&beDisplayedUserName=${cardBaseInfo.value.userName}`
	}
})

const selectLocationByAddressFunc = async () => {
	await selectLocationByAddressApi(cardBaseInfo.value.companyAddress)
		.then((res) => {
			console.log('查询成功', res)
			let locationStr = res.data.geocodes[0].location
			let locationArr = locationStr.split(',')
			let lng = locationArr[0]
			let lat = locationArr[1]
			console.log('经度', lng)
			console.log('纬度', lat)
			uni.openLocation({
				latitude: Number(lat),
				longitude: Number(lng),
				address: cardBaseInfo.value.companyAddress,
				name: cardBaseInfo.value.companyName
			})
		})
		.catch((err) => {
			console.log('查询失败', err)
		})
}

// 导航点击事件
const navigationClick = () => {
	console.log('导航信息', cardBaseInfo.value)
	// 在经纬度正常的情况下（地址通过选择位置的方式的情况下）
	if (cardBaseInfo.value.lat == '' || cardBaseInfo.value.lng == '') {
		// 无经纬度，先通过高德地图的地理编码获取经纬度，在调用导航
		selectLocationByAddressFunc()
	} else {
		// 有经纬度，正常导航
		uni.openLocation({
			latitude: Number(cardBaseInfo.value.lat),
			longitude: Number(cardBaseInfo.value.lng),
			address: cardBaseInfo.value.companyAddress,
			name: cardBaseInfo.value.companyName
		})
	}
}

// 拨打电话点击事件
const callClick = () => {
	uni.makePhoneCall({
		phoneNumber: cardBaseInfo.value.phone
	})
}

// 收藏名片的函数
const collectCardFunc = async () => {
	let data = {
		collectUserId: cardBaseInfo.value.userId,
		userId: userStore.userInfo.userId
	}
	await collectCardApi(data)
		.then((res) => {
			if (res.data.result == 'success') {
				console.log('收藏res', res)
				uni.showToast({
					title: '收藏成功',
					icon: 'none',
					duration: 1000,
					mask: true
				})
			} else if (res.data.result == 'error') {
				console.log('收藏err', res)
				uni.showToast({
					title: '收藏失败',
					icon: 'none',
					duration: 1000,
					mask: true
				})
			}
		})
		.catch((err) => {
			console.log('收藏err', err)
			uni.showToast({
				title: '收藏失败',
				icon: 'none',
				duration: 1000,
				mask: true
			})
		})
}

// 查询名片详情函数
const selectCardDetailFunc = async () => {
	uni.showLoading({
		title: '加载中',
		mask: true
	})
	await selectCardDetailApi(cardBaseInfo.value.userId)
		.then((res) => {
			if (res.data.result == 'success') {
				console.log('查询卡片详情信息res', res)
				// 个人资料匹配数据
				cardBaseInfo.value.avatarUrl = res.data.data.cardUser.cardUserProfilePicture
				cardBaseInfo.value.userName = res.data.data.cardUser.cardUserName
				cardBaseInfo.value.userPosition = res.data.data.cardUser.cardUserPosition
				cardBaseInfo.value.companyName = res.data.data.cardUser.companyName
				cardBaseInfo.value.phone = res.data.data.cardUser.cardUserPhone
				cardBaseInfo.value.email = res.data.data.cardUser.cardUserEmail
				cardBaseInfo.value.website = res.data.data.cardUser.companyWebsite
				cardBaseInfo.value.companyAddress = res.data.data.cardUser.companyAddress
				cardBaseInfo.value.userIntroduce = res.data.data.cardUser.cardUserIntroduce
				cardBaseInfo.value.wxNumber = res.data.data.cardUser.cardUserWx
				cardBaseInfo.value.wxQrCode = res.data.data.cardUser.cardUserWxImage
				cardBaseInfo.value.lat = res.data.data.cardUser.latitude
				cardBaseInfo.value.lng = res.data.data.cardUser.longitude

				// 企业介绍匹配数据
				let nCompanyIntroduceList = []
				if (res.data.data.cardCompany != null && res.data.data.cardCompany != undefined) {
					if (res.data.data.cardCompany.introduceList != null && res.data.data.cardCompany.introduceList != undefined) {
						console.log('res.data.data.cardCompany.introduceList', res.data.data.cardCompany.introduceList)
						nCompanyIntroduceList = res.data.data.cardCompany.introduceList.map((item) => {
							return {
								id: item.companyId,
								title: item.introduceTitle,
								content: item.introduceContent,
								images: item.introduceImage.split(',')
							}
						})
						console.log('nCompanyIntroduceList', nCompanyIntroduceList)
					}
				}

				// 产品介绍匹配
				productIntroduceList.value = res.data.data.cardCompany.productIntroduceList
				console.log('productIntroduceList.value', productIntroduceList.value)

				companyIntroduceList.value = nCompanyIntroduceList
			} else if (res.data.result == 'error') {
				uni.showToast({
					title: '查询失败',
					icon: 'none',
					duration: 1000,
					mask: true
				})
			}
			uni.hideLoading()
		})
		.catch((err) => {
			console.log('查询卡片详情信息err', err)
			uni.hideLoading()
		})
}

onLoad((option) => {
	console.log(111)
	console.log(option)
	optParam.value = option
	cardBaseInfo.value.userId = option.beDisplayedUserId
	// 修改头部标题
	uni.setNavigationBarTitle({
		title: option.beDisplayedUserName + '的名片'
	})
	selectCardDetailFunc()
})
</script>

<style lang="scss" scoped>
:deep(.custom-button) {
	min-width: auto !important;
	box-sizing: border-box;
	width: 50px !important;
	height: 50px !important;
	border-radius: 16px !important;
	margin: 8rpx !important;
}

:deep(.custom-radio) {
	height: 50px !important;
	line-height: 50px !important;
}

:deep(.loading-wrap) {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

// :deep(.custom_fab){
// 	font-s
// }

:deep(.custom-rate-class) {
	display: block;
	height: 22px;
}

:deep(.wd-img) {
	width: 100%; /* 图片宽度设置为 100% */
	height: auto; /* 图片高度自动调整 */

	.wd-img__image {
		width: 100%; /* 图片宽度设置为 100% */
		height: auto; /* 图片高度自动调整 */
	}
}

:deep(.product_introduce_box) {
	.wd-card {
		margin: 20px 0px 0px 0px;

		.wd-card__footer {
			padding: 6px 0px;
		}
	}
}
</style>
